<template>
  <div class="singleChoice">
    <el-row style="margin-top: 5px;width: 50%;padding-left: 10px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px" label-position="left">
        <el-form-item label="题目" prop="question">
          <el-input v-model="ruleForm.question" placeholder="请输入题目"></el-input>
        </el-form-item>
        <el-form-item label="A" prop="A">
          <el-input v-model="ruleForm.A" placeholder="请输入选项内容"></el-input>
        </el-form-item>
        <el-form-item label="B" prop="B">
          <el-input v-model="ruleForm.B" placeholder="请输入选项内容"></el-input>
        </el-form-item>
        <el-form-item label="C" prop="C">
          <el-input v-model="ruleForm.C" placeholder="请输入选项内容"></el-input>
        </el-form-item>
        <el-form-item label="D" prop="D">
          <el-input v-model="ruleForm.D" placeholder="请输入选项内容"></el-input>
        </el-form-item>
        <el-form-item label="答案" prop="answer">
          <el-radio-group v-model="ruleForm.answer">
            <el-radio label="A">A</el-radio>
            <el-radio label="B">B</el-radio>
            <el-radio label="C">C</el-radio>
            <el-radio label="D">D</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'singleChoice',
    props: ['index'],
    components: {},
    data() {
      return {
        ruleForm:{
          question:'',
          A:'',
          B:'',
          C:'',
          D:'',
          answer:'',
        },
        rules:{
          question: [{ required: true, message: '请输入题目', trigger: 'blur' }],
          A: [{ required: true, message: '请输入选项内容', trigger: 'blur' }],
          B: [{ required: true, message: '请输入选项内容', trigger: 'blur' }],
          C: [{ required: true, message: '请输入选项内容', trigger: 'blur' }],
          D: [{ required: true, message: '请输入选项内容', trigger: 'blur' }],
          answer: [{ required: true, message: '请选择答案', trigger: 'change' }],
        }
      }
    },
    computed: {
      isSuccess(){
        return this.ruleForm.question && this.ruleForm.A && this.ruleForm.B && this.ruleForm.C && this.ruleForm.D && this.ruleForm.answer
      },
      name(){
        return JSON.stringify(this.ruleForm)
      },
      answer() {
        return this.ruleForm.answer
      }
    },
    methods: {
      rulesForm(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
          } else {
            this.$message.info(`第${this.index}题还未输入完整`)
            return false;
          }
        });
      }
    },
    mounted() {
    },
    created() {
    },
    watch: {}
  }
</script>

<style scoped lang="scss">
  .singleChoice {
    margin-bottom: 20px;
    .el-form--label-left .el-form-item__label{

    }
    .el-form-item__content{

    }
  }
</style>

